@use 'sass:math' as math;
@import '../../assets/stylesheets/fonts.scss';
@import '../../assets/stylesheets/colors.scss';

#leftPanellight {
  flex: 1 1 60%;
  height: 100%;
  background-color: white;
  font-family: $raleway;
  justify-content: space-evenly;
  min-width: 500px; // changed this to make dev easier w/ dev tools open
  overflow: auto;
  border-radius: 5px;
  padding: 8px 14px;
  --choose-test-color: #{$salmon};
}

#leftPaneldark {
  flex: 1 1 60%;
  height: 100%;
  background-color: $chromegray;
  font-family: $raleway;
  justify-content: space-evenly;
  min-width: 500px; // changed this to make dev easier w/ dev tools open
  overflow: auto;
  border-radius: 5px;
  padding: 8px 14px;
  --choose-test-color: #{$mint};
}

@mixin box-styling {
  background-color: black;
  padding: 10px 10px 22px 15px;
  margin: 10px 18px 0 8px;
  border: 1px solid transparent;
  border-radius: 4px;
  box-shadow: 1px 1px 15px rgba(21, 27, 38, 0.05);
  font-family: $raleway;

  img {
    margin: 2px;
    opacity: 0.8;
    width: 15px;
    height: 15px;
  }

  label {
    padding: 0.3em 0.5em;
    font-size: 12px;
  }

  p {
    font-size: 14px;
    padding: 5px;
  }
}

@mixin box-header-alignment {
  margin-bottom: 12px;

  h3 {
    float: left;
    font-size: 14px;
  }

  img {
    float: right;
  }
}

@mixin tooltip(
  $tooltip-arrow-base: 2em,
  $tooltip-arrow-length: 1em,
  $tooltip-border-width: 0,
  $tooltip-border-color: transparent,
  $tooltip-transition-out-duration: 0.3s
) {
  box-sizing: border-box;
  position: absolute;
  left: -230%;
  bottom: 100%;
  margin-bottom: $tooltip-arrow-length;
  background-color: $light-gray3;
  border: $mint solid 1px;
  font-size: 10px;
  text-align: left;
  line-height: 12px;
  width: 180px;

  visibility: hidden;
  opacity: 0;
  transform: translate(-50%, $tooltip-arrow-length);
  transition: visibility 0s linear $tooltip-transition-out-duration,
    opacity $tooltip-transition-out-duration ease-in 0s,
    transform $tooltip-transition-out-duration ease-in 0s;

  // Disable events.
  pointer-events: none;

  &::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 80%;
    width: 0;
    height: 0;
    // Draw a triangle.
    border-top: ($tooltip-arrow-length - $tooltip-border-width) solid $mint;
    border-left: (math.div($tooltip-arrow-base, 2)- $tooltip-border-width) solid transparent;
    border-right: (math.div($tooltip-arrow-base, 2) - $tooltip-border-width) solid transparent;
    // Center the triangle.
    margin-left: ($tooltip-border-width - math.div($tooltip-arrow-base, 2));
  }
}

@mixin hastooltip($tooltip-transition-in-duration: 0.3s) {
  position: relative;
  // Prevent the tooltip from being clipped by its container.
  overflow: visible;

  // Display the tooltip on hover and on focus.
  &:hover,
  &:focus {
    #tooltip {
      visibility: visible;
      opacity: 1;
      transform: translate(-50%, 0); // horizontally centered
      transition: visibility 0s linear 0s, opacity $tooltip-transition-in-duration ease-out 0s,
        transform $tooltip-transition-in-duration ease-out 0s;
    }
  }
}
